{% extends "base.html" %}
{% load staticfiles %}

{% block page_content %}
<section class="content-header" style="padding-top:0px" xmlns="http://www.w3.org/1999/html">
<div class="row">
    <div class="box box-info">
        <div class="box-header">
            <h2>Clustering results for {{ object.algorithm }} on {{ object.clustercodes_set.count }}</h2>
        </div>
    </div>
</div>
</section>
<section class="content">
    <div class="row">
        <div class="col-sm-6">
            <div class="box box-primary">
            <div class="box-body">
            <table class="table dataTables">
            <thead>
            <tr><th>Index algorithm</th><th>object</th><th>Video</th><th class="text-center">count</th></tr>
            </thead>
            <tbody>
            {% for k in index_entries %}
            <tr><td>{{ k.algorithm }}</td><td>{{ k.detection_name }}</td><td>{{ k.video.name }}</td><td class="text-right">{{ k.count }}</td></tr>
            {% endfor %}
            </tbody>
            </table>
            </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div class="box-body">
                        <table class="table dataTables">
                        <thead>
                        <tr>
                            <th>Codes</th>
                            <th>Counts</th>
                            <th>Frame 1</th>
                            <th>Frame 2</th>
                            <th>Details</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for k in coarse %}
                        <tr>
                            <td class="text-center">{{ k.coarse_text }}</td>
                            <td class="text-right">{{ k.count }}</td>
                            {% if k.first.detection %}
                                <td class="text-center">Detection<img style="height:100px;margin: auto" src="{{ MEDIA_URL }}{{ k.first.video.pk }}/regions/{{ k.first.detection.pk }}.jpg" class="img-responsive"/></td>
                            {% else %}
                                <td class="text-center">Frame<img style="height:100px;margin: auto" src="{{ MEDIA_URL }}{{ k.first.video.pk }}/frames/{{ k.first.frame.frame_index }}.jpg" class="img-responsive"/></td>
                            {% endif %}
                            {% if k.last.detection %}
                                <td class="text-center">Detection<img style="height:100px;margin: auto" src="{{ MEDIA_URL }}{{ k.last.video.pk }}/regions/{{ k.last.detection.pk }}.jpg" class="img-responsive"/></td>
                            {% else %}
                                <td class="text-center">Frame<img style="height:100px;margin: auto" src="{{ MEDIA_URL }}{{ k.last.video.pk }}/frames/{{ k.last.frame.frame_index }}.jpg" class="img-responsive"/></td>
                            {% endif %}
                            <td class="text-center"><a href="/coarse_code/{{ object.pk }}/{{ k.coarse_text }}">Details</a></td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
{% block page_js%}
<script>
    $(document).ready(function() {
        InitializeTables();
    })
</script>
{% endblock %}
